<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改轮播图')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: jasny-bootstrap-css" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-ad-edit" th:object="${shopAd}">
            <input name="id" th:field="*{id}" type="hidden">
            <input name="relateId" th:field="*{relateId}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">类型：</label>
                <div  class="col-sm-8">
                    <select name="type" class="form-control select2-multiple" th:with="type=${@dict.getType('sys_ad_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${shopAd.type + '' eq dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">标题：</label>
                <div class="col-sm-8">
                    <input name="title" th:field="*{title}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">展示图片:</label>
                <br/>
                <div class="col-sm-8">
                    <div class="fileinput fileinput-new" data-provides="fileinput">
                        <div class="fileinput-new thumbnail">
                            <img th:src="@{*{image}}">
                        </div>
                        <input id="fileinput-input" name="image" class="form-control" type="text" style="display: None" th:field="*{image}">
                        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                        <div>
                            <span class="btn btn-white btn-file">
                                <span class="fileinput-new">选择图片</span>
                                <span class="fileinput-exists">更改</span>
                                <input name="fileinput-1" id ="fileinput-1" type="file">
                            </span>
                            <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">关联类型：</label>
                <div  class="col-sm-8">
                    <select id="relateType" name="relateType" class="form-control" onchange="changeSelect()" th:with="type1=${@dict.getType('sys_ad_relate')}" >
                        <option th:each="dict : ${type1}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${shopAd.relateType + '' eq dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">关联对象：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input class="form-control" type="text" onclick="selectRelateObject()" id="relateName" readonly="true" th:value="${relateName}">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">起始日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="beginDate" th:value="${#dates.format(shopAd.beginDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">结束日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="endDate" th:value="${#dates.format(shopAd.endDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input name="orders" th:field="*{orders}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">链接地址：</label>
                <div class="col-sm-8">
                    <input name="url" th:field="*{url}" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: jasny-bootstrap-js" />
    <th:block th:include="include :: select2-js" />
    <script type="text/javascript">
        var prefix = ctx + "normal/ad";
        $("#form-ad-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-ad-edit').serialize());
            }
        }

        $(document).ready(function () {
            $("#fileinput-1").fileinput({
                'name':'text-1',
                'clearName':true
            });
            $("#fileinput-1").on("change.bs.fileinput", function (event, data, previewId, index) {
                var file =  this.files[0];
                if (file == null || file == undefined){
                    alert("置空");
                    return;
                }
                var formFile = new FormData();
                formFile.append("action", "UploadVMKImagePath");
                formFile.append("file", file); //加入文件对象
                var data = formFile;
                $.ajax({
                    url: "/common/upload",
                    type: "POST",
                    data:data,
                    dataType: "json",
                    cache:false,         //不设置缓存
                    processData: false,  // 不处理数据
                    contentType: false,   // 不设置内容类型
                    success: function (result) {
                        console.log(result);
                        if(result.code == 0){
                            $('#fileinput-input').val(result.url);
                            alert("上传完成!");
                        }else{
                            alert("上传失败");
                        }
                    },
                });
            });
        });

        $("input[name='beginDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='endDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });


        function changeSelect(){
            $("#relateId").val(0);
            $("#relateName").val("");
        }
        function selectRelateObject() {
            var relateType = $("#relateType").val();
            console.log(relateType);
            var relateId = $("#relateId").val();
            console.log(relateId);
            relateId = relateId > 0 ? relateId : 0;
            var url = "";
            var title = "";
            if (relateType == 0){
                //0是没有选择 弹出错误
                $.modal.alertWarning("请先选择关联类型");
                return ;
            }else if(relateType == 1 ){
                //1是优惠券 弹出优惠券
                url = ctx + "normal/goods" + "/selectSingleGoods";
                title = "优惠券选择";
            }else if(relateType == 2){
                //2 是分类 弹出分类树
                url = ctx + "normal/category" + "/selectProductCategoryTree/" + "0";
                title = "分类选择";
            }else if(relateType == 3){
                //3 是分组 弹出分组选择
                url = ctx + "normal/group" + "/selectSingleGroup";
                title = "分组选择";
            }
            $.modal.openFull(title,url);
        }
    </script>
</body>
</html>